<template>
  <div class="app-wrapper">
    <!-- 导航栏：首页 / 记事本 -->
    <nav class="nav-bar">
      <router-link to="/" class="nav-btn">首页</router-link>
      <router-link to="/todo" class="nav-btn active">记事本</router-link>
      <router-link to="/about" class="nav-btn">关于</router-link>
    </nav>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
/* 保持原有导航栏样式（省略重复代码） */
.nav-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  justify-content: center; /* 按钮水平居中 */
}
.nav-btn {
  padding: 8px 16px;
  border: 1px solid #ff6b81;
  border-radius: 4px;
  text-decoration: none;
  color: #ff6b81;
  transition: background 0.3s, color 0.3s;
}
.nav-btn.active,
.nav-btn:hover {
  background: #ff6b81;
  color: #fff;
}
</style>